<template>
  <div style="display:flex; flex-direction: column;">
      <!-- 标题 -->
      <div class="titleview">
        <p style=" font-size: 24px; font-weight: bold;">{{newsdata.title}}</p>
      </div>
      <!-- 时间 -->
      <div class="timeview">
        <van-icon name = "clock-o" size="20px"></van-icon>
        <p style="padding-left: 10px;">{{newsdata.author}} {{newsdata.time}}</p>
      </div>
      <!-- 正文 -->
      <div class="contentview">
        <p>
            中新网客户端北京11月24日电(记者 张尼)来自上海市卫健部门的消息显示，22日晚浦东机场对17719名相关人员开展核酸检测，1人结果阳性，后被诊断为新冠肺炎确诊病例。
        </p>
        <p>
            天津、上海、安徽、内蒙古……11月以来，短短20余天时间，国内多个省份又出现散发病例。“防人亦需防物”——这是近期多位专家发出的共同提示。与此同时，从国家到地方层面也作出层层部署，对疫情输入严防死守。
        </p>
        <p style="text-align: center;">
          <van-image alt style="" src="//p5.img.cctvpic.com/photoworkspace/contentimg/2020/11/24/2020112407045528531.jpg"></van-image>
        </p>
        <p style="text-align: center; font-size: 13px;">
            1月21日，受新冠肺炎疫情影响，天津市滨海新区对辖区内全体居民进行大规模核酸检测筛查。图为民众等待核酸检测取样。 中新社记者 张道正 摄
        </p>
        <p>
            进入11月，全国大部分地区气温降低，但与此同时，新冠病毒似乎变活跃起来。
        </p>
        <p>
            本月，国内除了此前已经出现疫情的新疆外，又有包括天津、上海、安徽阜阳、内蒙古满洲里在内的4地通报有本土确诊病例。
        </p>
        </div>
        <div class="tableBottom">
          <div class="tableTitle">
            <span class="midText">分割线</span>
          </div>
        </div>

        <div>
          <van-image style="padding: 20px;" src="//p3.img.cctvpic.com/photoAlbum/page/performance/img/2020/4/29/1588125140538_983.png"></van-image>
        </div>

        <div style="padding: 0 20px;">
          <p>责任编辑 王伟</p>
        </div>

        <div class="tableBottom">
          <div class="tableTitle">
            <span class="midText">分享给好友</span>
          </div>
        </div>

        <div class="shareview">
          <div v-for="(item,key) in newsdata.shareImage" :key = "key">
            <van-image :src="item"  style="height: 60px; width: 60px;"></van-image>
          </div>
        </div>

        <div class="line">
        </div>
        <div class="aboutLink">
          <span>相关链接:</span>
        </div>

        <van-cell-group>
          <van-cell>
            <div class="linkcell" v-for="(item,key) in newsdata.links" :key= "key">
              <div class="linktitle">
                <span>{{item.title}}</span>
                <span>{{item.time}}</span>
              </div>
              <van-image src="https://p3.img.cctvpic.com/photoworkspace/2020/11/24/2020112408584653590.jpg" style="width: 120px; margin-left: auto; padding: 10px;"></van-image>
            </div>
          </van-cell>
        </van-cell-group>

        <div class="line">
        </div>

        <div style="display: flex; justify-content: center; align-items: center;">
          <p style="font-size: 13px; color: rgb(148,148,148);">-我已经到底线啦!-</p>
        </div>

        <div class="line">
        </div>

  <!-- 评论 -->
        <div class="comment">
          <van-field class="commentfield" placeholder="我要说两句" />
          <van-icon name = "chat-o" size="20px" style="margin-left: auto; padding-left: 10px; padding-right: 6px;"></van-icon>
          <van-icon name = "good-job-o" size="20px" style="margin-left: auto; padding-right: 6px;"></van-icon>
          <van-icon name = "star-o" size="20px" style="margin-left: auto; padding-right: 6px;"></van-icon>
          <van-icon name = "share-o" size="20px" style="margin-left: auto;"></van-icon>
        </div>
  </div>
</template>

<script>

  import Vue from 'vue';
  import { Icon } from 'vant';

  Vue.use(Icon);

  export default {
    name: 'people',
    data(){
      return{
        title:'新闻页',
        newsdata:{
          'title':'浦东机场货运站又现确诊病例！“物传人”再添实锤？',
          'author':'融媒体中心',
          'time':'2020-11-17 08:13',
          'content':[
            '　　中新网客户端北京11月24日电(记者 张尼)来自上海市卫健部门的消息显示，22日晚浦东机场对17719名相关人员开展核酸检测，1人结果阳性，后被诊断为新冠肺炎确诊病例。',
            '　　天津、上海、安徽、内蒙古……11月以来，短短20余天时间，国内多个省份又出现散发病例。“防人亦需防物”——这是近期多位专家发出的共同提示。与此同时，从国家到地方层面也作出层层部署，对疫情输入严防死守。',
            '11月21日，受新冠肺炎疫情影响，天津市滨海新区对辖区内全体居民进行大规模核酸检测筛查。图为民众等待核酸检测取样。 中新社记者 张道正 摄',
            '　　进入11月，全国大部分地区气温降低，但与此同时，新冠病毒似乎变活跃起来。',
            '　　本月，国内除了此前已经出现疫情的新疆外，又有包括天津、上海、安徽阜阳、内蒙古满洲里在内的4地通报有本土确诊病例。'
            ],
          'images':[
            '//p5.img.cctvpic.com/photoworkspace/contentimg/2020/11/24/2020112407045528531.jpg',
            'https://p3.img.cctvpic.com/photoworkspace/2020/11/24/2020112408584653590.jpg'
          ],
          'shareImage':[
            require('@/assets/lmw/pyq.png'),
            require('@/assets/lmw/wx.png'),
            require('@/assets/lmw/qq.png'),
            require('@/assets/lmw/wb.png')
          ],
          'organization':'融媒体中心',
          'links':[
          {
            'title':'《新闻早班车》20201119',
            'time':'2020-11-19 05:06',
            'imageurl':'https://p3.img.cctvpic.com/photoworkspace/2020/11/24/2020112408584653590.jpg'
          },
          {
            'title':'《新闻早班车》20201118',
            'time':'2020-11-18 05:06',
            'imageurl':'https://p3.img.cctvpic.com/photoworkspace/2020/11/24/2020112408584653590.jpg'
          },
          {
            'title':'《新闻早班车》20201117',
            'time':'2020-11-17 05:06',
            'imageurl':'https://p3.img.cctvpic.com/photoworkspace/2020/11/24/2020112408584653590.jpg'
          }
          ]
          }
      }
    },
    methods:
    {
      clickItem(item)
      {
        let self = this;
        Dialog.alert({
          message: '弹窗内容',
        }).then(() => {
          // on close
        });
      }
    }
  }

</script>

<style lang="scss" scoped>

.titleview
{
  padding: 0 20px;
}

.timeview
{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 13px;
  padding-left: 30px;
}

.contentview
{
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;

}
.tableBottom
{
  height: 50px;
  padding: 20px;
}

.tableTitle {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background-color: #d4d4d4;
    text-align: center;
    font-size: 16px;
    color: rgba(101, 101, 101, 1);
  }
 .midText {
    position: absolute;
    left: 50%;
    background-color: #ffffff;
    padding: 15px;
    transform: translateX(-50%) translateY(-50%);
  }

.shareview
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 60px;
  padding: 20px;
}

.line
{
  height: 10px;
  background-color: rgba($color: #f0f0f0, $alpha: 1.0);
}

.aboutLink
{
  padding: 5px 20px;
}

.linkcell
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid rgba($color: #f0f0f0, $alpha: 1.0);
}

.linktitle
{
  display: flex;
  flex-direction: column;
  width: 240px;
}

.comment
{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 20px;
}
.commentfield
{
  height: 35px;
  border-radius: 17px;
  align-items: center;
  background-color: rgba($color: #f0f0f0, $alpha: 1.0);

}
</style>
